<template>
	<custom-page title=" " textStyle="white" borderBottomColor="transparent" nav-background-color="transparent"
		backgroundColor="#000000">
		<template #page>
			<view class="main-content">
				<swiper class="swiper" vertical v-if="formSupport" :current="currentSwiper" :circular="true"
					@change="onSwiperChange">
					<swiper-item v-for="(item, index) in videoListData" :key="index">
						<view class="swiper-item-layout">
							<!-- #ifdef MP-WEIXIN -->
							<video v-if="index==currentSwiper" class="video-layout" :src="item.videoAddress"
								:autoplay="true" :loop="true" :controls="false" :show-center-play-btn="false"
								:object-fit="cover"></video>
							<!-- #endif -->
							<!-- #ifdef APP-PLUS -->
							<DomVideoPlayer v-if="index==currentSwiper" :src="item.videoAddress" :autoplay="true"
								:controls="false" :isLoading="true" />
							<!-- #endif -->
							<view class="bottom-layout">
								<view class="name-row">@{{item.userName}}</view>
								<view class="content">{{item.tittle}}</view>
							</view>
							<view class="right-col">
								<image class="head-img" mode="aspectFill" :src="item.sculptureUrl"
									@click="assistantClick(item)"></image>
								<image class="love-collect-img" :src="ftpUrl + (item.liked?'/ic_love_select.png':'/ic_love.png')" @click="likeClick(item)"></image>
								<view class="liked-collect-text">{{item.likeNum}}</view>
								<image class="love-collect-img" :src="ftpUrl + (item.favorite?'/ic_collect_select.png':'/ic_collect.png')" @click="collectClick(item)"></image>
								<view class="liked-collect-text">{{item.favoriteNum}}</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</template>
	</custom-page>
</template>

<script>
	import DomVideoPlayer from 'uniapp-video-player'

	export default {
		components: {
			DomVideoPlayer
		},
		data() {
			return {
				showType: '',
				formSupport: true,
				videoListData: [],
				currentPage: 1,
				currentSwiper: 0,
				squareVideoId: '',
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowWidth = res.windowWidth;
					this.screenHeight = res.windowHeight;
				}
			});
		},
		onLoad(val) {
			if (val && val.showType) {
				this.showType = val.showType
			}
			if (val && val.currentPage) {
				this.currentPage = parseInt(val.currentPage)
			}
			if (val && val.squareVideoId) {
				this.squareVideoId = val.squareVideoId
			}
			this.requestCenter.getSystemConfig().then(res => {
				this.formSupport = res.formSupport
				if (res.formSupport) {
					this.getSquareAssistantVideo()
				}
			})
		},
		methods: {
			//获取视频列表
			getSquareAssistantVideo() {
				let params = {
					current: this.currentPage,
					pageSize: 10,
					status: 1, //审核通过
					showType: this.showType, //类别0-广场助教风采视频1-广场助教图片2-个人中心视频3-个人中心图片4-广场球友发风采视频5-广场球友风采图片	
					sourceType: '3', //0-管理后台列表 1-app或小程序广场 2-app小程序个人中心	
				}
				this.requestCenter.getSquareAssistantVideo(params).then(res => {
					this.videoListData = res.records
					let index = this.videoListData.findIndex(e => e.id == this.squareVideoId)
					if (index > -1) {
						this.currentSwiper = index
					}
				})
			},

			//swiper 切换时
			onSwiperChange(event) {
				let current = event.detail.current
				this.currentSwiper = current
			},
			
			//点击喜欢
			likeClick(item){
				let params = {
					showId: item.id,
					userId: item.updateUserId,
				}
				if(item.liked){
					params.likedStatus = '0'
				}else{
					params.likedStatus = '1'
				}
				this.requestCenter.addLikeFavorite(params).then(res => {
					if(item.liked){
						item.likeNum--
					}else{
						item.likeNum++
					}
					item.liked = !item.liked
				})
			},
			
			//点击收藏
			collectClick(item){
				let params = {
					showId: item.id,
					userId: item.updateUserId,
				}
				if(item.favorite){
					params.likedStatus = '0'
				}else{
					params.likedStatus = '1'
				}
				this.requestCenter.addCollect(params).then(res => {
					if(item.favorite){
						item.favoriteNum--
					}else{
						item.favoriteNum++
					}
					item.favorite = !item.favorite
				})
			},

			pauseAllVideos() {
				this.videoListData.forEach((_, index) => {
					const videoContext = uni.createVideoContext('video-' + index);
					videoContext.pause();
				});
			},
			playCurrentVideo() {
				const videoContext = uni.createVideoContext('video-' + this.currentSwiper);
				videoContext.play();
			},


			//点击助教
			assistantClick(item) {
				uni.navigateTo({
					url: `/pages/assistant-detaill/assistant-detaill?userId=${item.updateUserId}`
				})
			},

			change(res) {
				console.log("change事件执行了");
				this.currentSwiper = res.detail.current

			},
			touchStart(res) {
				this.pageStartY = res.changedTouches[0].pageY;
				console.log("touchStart：" + this.pageStartY);
			},
			touchEnd(res) {
				this.pageEndY = res.changedTouches[0].pageY;
				console.log("touchEnd：" + this.pageEndY);
				let platform = uni.getSystemInfoSync().platform;
				if (platform == 'android') {
					if ((this.pageStartY - this.pageEndY) > 150) {
						console.log("向上滑动:");
						if (this.currentSwiper < (this.videoListData.length - 1)) {
							this.currentSwiper = this.currentSwiper + 1
						}
					} else if ((this.pageStartY - this.pageEndY) < -150) {
						console.log("向下滑动:");
						if (this.currentSwiper > 1) {
							this.currentSwiper = this.currentSwiper - 1
						}
					}
				}
			},
		}
	}
</script>

<style scoped lang="less">
	.main-content {
		width: 100%;
		height: 100%;
	}

	.swiper {
		width: 100%;
		height: 100%;
	}

	.swiper-item-layout {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.video-layout {
		flex: 1;
		width: 100%;
	}

	.right-col {
		position: absolute;
		top: 40%;
		right: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.head-img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}

		.love-collect-img {
			width: 70rpx;
			height: 70rpx;
			margin-top: 40rpx;
		}
		.liked-collect-text{
			font-size: 30rpx;
			color: #fff;
			margin-top: 14rpx;
		}
	}

	.bottom-layout {
		display: flex;
		flex-direction: column;
		padding: 10rpx 48rpx 32rpx 30rpx;
		box-sizing: border-box;

		.name-row {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 48rpx;
		}

		.content {
			margin-top: 16rpx;
			font-size: 28rpx;
			color: #F9F9F9;
			line-height: 36rpx;
		}
	}
</style>